<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        #error{
            color: red;
        }
        #btn:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    请输入一个大于0小于100的正整数：<input type="text" id="num"/>
    <button id="btn">在控制台打印三角形</button>
    <div id="error"></div>
</body>
<script>
    var reg = /^([1-9]|([1-9]\d))$/;
    //对输入时进行监听，输入的值是否为数字或输入的值是否在规定范围
    $('#num').bind("input propertychange",function() {
        //不符合要求显示错误提示
        if(!reg.test($(this).val()) && $(this).val() != ""){
           $('#error').text("错误提示：请输入正确的的值!");
        }
        //符合要求则清除错误提示
        if(reg.test($(this).val()) || $(this).val() == ""){
            $('#error').text("");
        }
    });

    $('#btn').click(function() {
        let num = $('#num').val();
        if(reg.test(num)){
            //row为行数
            for(let row = 1;row <= num;row ++){
                let result = "";
                //space为每行所需的空格
                for(let space = 0; space < num - row ;space ++){
                    result = result + " ";
                }
                //star为每行的星星，以组成三角形
                for(let star = 0; star < row * 2 - 1 ;star ++){
                    result = result + "*";
                }
                console.log(result);
            }
        }
    });
    

</script>
</html>